<template>
  <div>
    <div  style="height: 50px">
      
      <div style="float:right;margin-right: 20px">
      <el-select v-model="value" placeholder="请选择" @change="jumpDifferent">
        <el-option
            v-for="item in distinct"
            :key="item.resourceType"
            :label="item.resourceType"
            :value="item.resourceType">
        </el-option>
      </el-select>
      </div>


      <form>
        <div style="float: left;margin-left: 20px">
          标题:
          <el-input style="width: auto"   v-model="noticeTitle"  size="small" placeholder="请输入内容"></el-input>
        </div>
        <div>
          <el-button type="primary" size="small" style="margin-left: 30px" @click="search()">搜索</el-button>
        </div>
      </form>
    </div>
    <hr>
    <div>
      <el-button type="primary" plain style="float: right;margin-left: 30px" size="small" v-on:click="goAddResource()">添加</el-button>

    </div>

    <div>
      <el-table
          :data="tableData"
          @selection-change="handleSelectionChange"
          style="width: 100%">
        <el-table-column
            fixed
            label="序号"
            type="index"
            width="50">
        </el-table-column>
        <el-table-column
            prop="resourceName"
            label="资源名称"
            width="200">
        </el-table-column>
        <el-table-column
            prop="resourceType"
            label="资源类型"
            show-overflow-tooltip
            width="400">
        </el-table-column>
        <el-table-column
            prop="uploadTime"
            label="上传日期"
            width="200">
        </el-table-column>
        <el-table-column
            fixed="right"
            label="下载"
            width="200">
          <template slot-scope="scope">
            <el-button  v-on:click ="downloadByUrl(scope.row)" type="text" size="small">下载</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div style="float: right;margin-top: 10px">
        <el-pagination
            background
            layout="prev, pager, next"
            :page-size="pageSize"
            :total="total"
            @current-change="mypage">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: "AnnounceMainPage",
  data(){
    return{
      value:'选择科目',
      account: sessionStorage.getItem("sno"),
      comId: '',
      pageSize: 5,
      total: 10,
        noticeTitle: '',
      tableData: null,
      distinct:null
    }
  },
  created(){

    let _this = this
    axios.get('http://localhost:8080/jas/sport/resource/getResourcePage'+'/1/'+this.pageSize).then(function (resp) {
      _this.tableData =resp.data
      console.log(_this.tableData)
    })
    axios.get('http://localhost:8080/jas/sport/resource/allCount').then(function (resp) {
      _this.total = resp.data
    })

    axios.get('http://localhost:8080/jas/sport/resource/selectDistinct').then(function (resp) {
      _this.distinct = resp.data
    })




    // this.comId =sessionStorage.getItem('cmtComId')
    // var that = this
    // axios.get('http://localhost:8080/jas/sport/resource/getResourceWithoutId').then(function (resp) {
    //   // that.total = resp.data
    //   that.tableData = resp.data
    // })
  },
  methods: {


    search() {
      if (this.noticeTitle!=''){
        var _this = this
        _this.noticeTitle = encodeURI(this.noticeTitle)
        axios.get('http://localhost:8080/jas/sport/resource/selectByNameCount/'+_this.noticeTitle).then(function (resp) {
          const resources = resp.data
          if (resources > 0){
            _this.$router.push({name:'ViewByName',params:{resourceName:_this.noticeTitle}})
            // this.$router.push({name:'ViewDiffesrentResource',params:{resourceName:val}})
          } else {
            alert("没有符合条件的查询")
          }

        })
      } else {
        alert('请输入查询条件')
      }
    },




    jumpDifferent(val){
      this.$router.push({name:'ViewDifferentResource',params:{resourceName:val}})
    },
    viewById(row) {
      this.$router.push({name: 'ViewNoticeDetail', params: {noticeId: row.id}})
    },
    goAddResource() {
      this.$router.push('/StudentMainPage/AddResource')
    },
    downloadByUrl(row) {
      console.log(row)
      const a = document.createElement('a'); // 创建a标签
      let url = row.resourceUrl
      var x = url.indexOf('/');
      for (var i = 0; i < 2; i++) {
        x = url.indexOf('/', x + 1);
      }
      var endUrl = url.slice(x)
      console.log(endUrl)
      a.setAttribute('download', row.resourceName);// download属性
      a.setAttribute('href', endUrl);// href链接
      a.click();// 自执行点击事件
    },
    mypage (currentpage) {
      const _this = this
      axios.get('http://localhost:8080/jas/sport/resource/getResourcePage/'+currentpage +'/' +_this.pageSize).then(function (resp) {
        _this.tableData = resp.data
      })
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
      // console.log(val)
    },
  },

    // search() {
    //   if (this.formForSearch.publishDate!='' || this.formForSearch.noticeTitle!=''){
    //     var _this = this
    //     var form = new FormData()
    //
    //     form.append('account',this.account)
    //     // form.append('publishDate',this.formForSearch.publishDate)
    //     form.append('noticeTitle',this.formForSearch.noticeTitle)
    //     axios.post('http://localhost:8080/jas/mport/notice/getNoticesForSearch',form).then(function (resp) {
    //       const noticeList = resp.data
    //       if (noticeList.length > 0){
    //         _this.$router.push({name:'ViewNotice',params:{notices:noticeList}})
    //       } else {
    //         alert("没有符合条件的查询")
    //       }
    //
    //     })
    //   } else {
    //     alert('请输入查询条件')
    //   }
    //
    // }
}
</script>

<style lang="scss" scoped>
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>